<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配置菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #bt {
            text-align: center;
        }

        .cont {
            padding: 10px;
        }

        .fxk {
            display: flex;
            width: calc(100vw - 20px);
            height: 60vh;
            align-items: center;
            flex-direction: row;
            margin-top: 50px;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        .cont label {
            margin-left: 0px !important;
            position: relative;
            width: 30vw;
            border: 1px solid black;
            text-align: center;
            height: 100px;
            border-radius: 4px;
            line-height: 100px;

        }

        .fxk>p>label:first-child {
            margin-right: 200px;
        }

        .cont input {
            position: absolute;
            top: 42%;
        }

        #qd {
            position: absolute;
            bottom: 100px;
            left: 50%;
            margin-left: -52.8px;
        }
    </style>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>

<body>
    <div class="cont">
        <div class="h3" id="bt">配置菜单</div>
        <div class="fxk">
        </div>
        <button type="button" class="btn btn btn-primary m-r-5 btn-lg" id="qd" onclick="pZ()">确认配置</button>
    </div>
    <script src="../js/pubilc.js"></script>
    <script>
        var cont = document.getElementsByClassName('cont')[0]
        var input1 = document.getElementsByClassName('input1')
        var fxk = document.getElementsByClassName('fxk')[0]
        var id = sessionStorage.getItem('id')
        xhr({
            methods: 'get',
            url: '/user/getPageList',
            success: function (res) {
                console.log(res)
                fxk.innerHTML = ''
                for (i = 0; i < res.length; i++) {
                    fxk.innerHTML += `<label class="checkbox-inline">
                    <input type="checkbox" class="input1" value="${res[i].page_id}"> ${res[i].page_name}
                </label>`
                }
            }
        })
        window.addEventListener("message", function (event) {
            console.log(event.data)
        });
        function pZ() {
            var arr = []
            for (i = 0; i < input1.length; i++) {
                if (input1[i].checked == true) {
                    arr.push(input1[i].value)
                }
            }
            xhr({
                methods: 'post',
                url: '/user/setSchoolMenu',
                data: JSON.stringify({
                    school_id: Number(id),
                    school_menu_ids: arr
                }),
                success: function (res) {
                    console.log(res)
                    top.postMessage('no Hellow', '*')
                }
            })
        }
    </script>
</body>

</html>